<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>输血管理系统</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
</head>

<body>

    <div class="data-manage-table">
        <template>
            <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;" >

                <el-form-item label="回收编号">
                    <el-input placeholder="请输入回收编号" v-model="query1.blood_recycle_id"></el-input>
                </el-form-item>
                <el-form-item label="血袋编号">
                    <el-input placeholder="请输入血袋编号" v-model="query1.blood_id"></el-input>
                </el-form-item>
                    <el-form-item label="状态">
                    <el-select v-model="query1.state">
                        <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="回收人">
                    <el-input placeholder="请输入回收人姓名" v-model="query1.recyclePeople"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker type="daterange" size="small" value-format="yyyy-MM-dd" v-model="query1.recycleTime"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryload">搜索</el-button>
                    <el-button type="info" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%"
                      border :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row fit>
<!--                <el-table-column type="selection" width="55" align="center" ></el-table-column>-->
                <el-table-column prop="bloodRecycleId" label="回收编号" width="100" align="center">
                </el-table-column>
                <el-table-column prop="number" label="血袋编号" width="180" align="center">
                </el-table-column>
                <el-table-column prop="recycleTime" label="回收日期" width="240" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{scope.row.recycleTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态" width="180" align="center">
                    <template slot-scope="scope">
                        {{ getRecycleBagStateName(scope.row.state) }}
                    </template>
                </el-table-column>
                <el-table-column prop="location" label="血袋样本位置" width="180" align="center">
                    <template slot-scope="scope">
                        {{getBloodLocationName(scope.row.location) }}
                    </template>
                </el-table-column>
                </el-table-column>
                <el-table-column prop="recyclePeopleNumber" label="回收人工号" width="180" align="center">
                </el-table-column>
                <el-table-column prop="recyclePeople" label="回收人" width="180" align="center">
                </el-table-column>
                <el-table-column fixed="right" width="200" align="center" label="操作" >
                    <template slot-scope="scope">
                        <el-button size="medium" type="danger" :disabled="scope.row.state == '03'||scope.row.state == '01'" @click="destorybloodbag(scope.row)">销毁</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="销毁信息填写" center :visible.sync="dialogVisible" width="1000px" >
                <!-- 内容的主体区域 -->
                <el-descriptions :column="2" :size="size" border>
                    <el-descriptions-item>
                        <template slot="label">
                            回收编号:
                        </template>
                        {{destoryForm.blood_recycle_id}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            销毁的血袋编号:
                        </template>
                        {{destoryForm.blood_bag_number}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            销毁人工号:
                        </template>
                        {{destoryForm.destory_people_number}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            销毁人:
                        </template>
                        {{destoryForm.destory_people}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            销毁方式:
                        </template>
                        <el-select v-model="destoryForm.destory_way">
                            <el-option v-for="item in destorywaylist" :key="item.code" :label="item.name"
                                       :value="item.code">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>
                </el-descriptions>
<!--                <el-form ref="form" :model="destoryForm" label-width="120px">-->
<!--&lt;!&ndash;                    <el-form-item label="回收编号" prop="blood_recycle_id">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="destoryForm.blood_recycle_id" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-form-item label="销毁的血袋编号" prop="blood_bag_number">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-input v-model="destoryForm.blood_bag_number" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-form-item>&ndash;&gt;-->
<!--                    <el-row>-->
<!--                        <el-col :span="10">-->
<!--                    <el-form-item label="销毁人工号" prop="destory_people_number">-->
<!--                        <el-input v-model="destoryForm.destory_people_number" style="width:180px; float: right;"></el-input>-->
<!--                    </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="10">-->
<!--                    <el-form-item label="销毁人" prop="destory_people">-->
<!--                        <el-input v-model="destoryForm.destory_people" style="width:180px; float: right;"></el-input>-->
<!--                    </el-form-item>-->
<!--                        </el-col>-->
<!--                    </el-row>-->
<!--                    <el-form-item label="销毁方式" prop="destory_way">-->
<!--                        <el-select v-model="destoryForm.destory_way">-->
<!--                            <el-option v-for="item in destorywaylist" :key="item.code" :label="item.name"-->
<!--                                       :value="item.code">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                    <el-button type="info" @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="simpledestory">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="批量销毁信息填写" center :visible.sync="dialogFormVisible" width="60%" >
                <!-- 内容的主体区域 -->
                <el-form ref="form1" :model="formbatch" label-width="100px">
                    <el-form-item label="销毁人" prop="destory_people">
                        <el-input v-model="formbatch.destory_people"></el-input>
                    </el-form-item>
                    <el-form-item label="销毁方式" prop="destory_way">
                        <el-select v-model="formbatch.destory_way">
                            <el-option v-for="item in desorymethod" :key="item.value" :label="item.label"
                                       :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="销毁人工号" prop="destory_people_number">
                        <el-input v-model="formbatch.destory_people_number"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                    <el-button type="info" @click="batchcancel" >取 消</el-button>
                    <el-button type="primary" @click="destorybatch">确 定</el-button>
                </span>
            </el-dialog>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align: center; margin-top: 20px;"/>
        </template>
    </div>

    <script src="/plugins/vue-2.6.11/vue.js"></script>
    <script src="/js/jquery.min.js"></script>
    <!--    <script src="../plugins/element-2.4.5/index.js"></script>-->
    <script src="/js/2.15.12/index.js"></script>
    <link href="/css/2.15.12/index.min.css" rel="stylesheet">
    <script src="/js/httpVueLoader.js"></script>
    <script src="/icons/iconfont.js"></script>
    <script src="/plugins/axios-0.27.2/axios.min.js"></script>
    <script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>


    <script>
        // 日期格式化
        (function () {

            let urlBase = "/recycle"
            var vm = window.vm = new Vue({
                el: '.data-manage-table',

                data() {
                    return {
                        size: '',
                        recycleTime: "",
                        recyclePeople: "",
                        state: "",
                        id: "",
                        currentRow: null,
                        pageNum: 1,
                        pageSize: 1,
                        total: 0,
                        logoTextShow: true,
                        entity: {},
                        sendTime:'',
                        flag: false,
                        tableData: [],
                        Form1: {},
                        multipleSelection: [],
                        bloodLocationList: [],
                        //搜索框信息
                        query1:{
                          blood_recycle_id: "",//回收编码
                          blood_id: "",//血袋编码
                          recycleTime: "",
                          recyclePeople: "",
                          state:"",
                        },
                        //样本状态选择
                        options: [],
                        //
                        //销毁方式
                        destorywaylist: [],
                        //弹出框显示
                        dialogFormVisible: false,
                        dialogVisible: false,
                        //dialog表格信息
                        formbatch: {
                            destory_way: '',
                            destory_people:'',
                            destory_people_number:'',
                        },
                        destoryForm: {
                            blood_recycle_id: '',
                            destory_way: '',
                            destory_people:'',
                            destory_people_number:'',
                            blood_bag_number:''
                        },
                        user: {
                            "accountNonExpired": true,
                            "accountNonLocked": true,
                            "credentialsNonExpired": true,
                            "enable": false,
                            "enabled": false,
                            "jobnum": "tom",
                            "menuUrls": {
                                "menu": [{
                                    "urls": [{
                                        "id": "11",
                                        "title": "11",
                                        "url": "/pages/error/403.html",
                                        "titleflag": "error"
                                    }], "title": "testerror", "titleflag": "error"
                                }, {
                                    "urls": [{
                                        "id": "22",
                                        "title": "5-5",
                                        "url": "/pages/error/505.html",
                                        "titleflag": "testerror"
                                    }], "title": "testerror2", "titleflag": "testerror"
                                }]
                            },
                            "noLocked": false,
                            "personalization": {
                                "asideFold": false,
                                "mainTabsHeaderFixed": true,
                                "asideControlOpen": false,
                                "headerSkin": "colorful",
                                "headerFixed": false,
                                "skin": "brown",
                                "asideSkin": "dark",
                                "asideControlFixed": true
                            },
                            "username": "tom"
                        },
                        //新增样本表单验证
                        addFormRules: {
                            A_blood_sample_number: [
                                { required: true, message: '请输入样本编号', trigger: 'blur' },
                            ],
                            Blood_number: [
                                { required: true, message: '请输入血液编号', trigger: 'blur' },
                            ],
                            state: [
                                { required: true, message: '请选择样本状态', trigger: 'change' },
                            ],
                            The_sample_location: [
                                { required: true, message: '请选择样本位置', trigger: 'change' },
                            ],
                            Operation_of: [
                                { required: true, message: '请输入操作人', trigger: 'blur' },
                            ],
                            Operating_manual: [
                                { required: true, message: '请输入操作人工号', trigger: 'blur' },
                            ]
                        }
                    }
                },
                created(){
                    this.load();
                    this.format1();

                },
                mounted() {
                    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                    this.getRecycleState();
                    this.getDestoryWay();
                    this.getBloodLocation();
                    this.getBloodLocationName();
                },
                methods: {
                    load() {
                        axios.get(urlBase+"/normal/page1",{
                            params: {
                                pageNum: this.pageNum,
                                pageSize: this.pageSize,
                        }
                        }).then(res => {
                            console.log(this.pageNum)
                            console.log(res)
                            console.log(this.pageSize)
                            this.tableData = res.data.records
                            console.log(this.tableData)
                            this.total = res.data.total
                        })

                    },
                    //查询
                    queryload(){
                        let dateval1=this.query1.recycleTime
                        for(let i =0 ; i<dateval1.length ; i++){
                            if(dateval1[i] instanceof Date)
                                console.log("11")

                        }
                        let startTime = dateval1[0]
                        let endTime = dateval1[1]
                        console.log("-----"+endTime)
                        // $.ajax({
                        //     url:urlBase+"/page"
                        // })
                        console.log(this.query1.recyclePeople)
                        axios.get(urlBase+"/normal/page",{
                            params: {
                                pageNum: this.pageNum,
                                pageSize: this.pageSize,
                                blood_recycle_id: this.query1.blood_recycle_id,
                                blood_id: this.query1.blood_id,
                                state: this.query1.state,
                                recyclePeople: this.query1.recyclePeople,
                                startTime: startTime,
                                endTime: endTime,
                            }
                        }).then(res => {
                            console.log(res)
                            console.log("----------------------")

                            this.tableData = res.data.records
                            this.total = res.data.total

                        })
                    },

                    //赋值销毁对话框
                    destorybloodbag(row) {
                        this.destoryForm.blood_recycle_id=row.bloodRecycleId//回收编码
                        console.log(this.destoryForm.blood_recycle_id)
                        this.destoryForm.blood_bag_number=row.number//血袋编码
                        this.destoryForm.destory_people=this.user.username;
                        this.destoryForm.destory_people_number=this.user.jobnum
                        this.dialogVisible = true


                        //this.form = {}
                    },
                    //清空搜索框
                    reset(){
                          this.query1.blood_id=""
                          this.query1.blood_recycle_id = ""
                          this.query1.recycleTime=""
                          this.query1.recyclePeople=""
                          this.query1.state=""
                          this.load()
                    },
                    //分页查询
                    handleSizeChange(pageSize) {
                        this.pageSize = pageSize;
                        console.log(pageSize)
                        this.load();
                    },
                    handleCurrentChange (pageNum) {
                        this.pageNum = pageNum;
                        console.log(pageNum)
                        this.load();
                    },
                    //批量销毁获取数据
                    handleSelectionChange(val) {
                        this.multipleSelection = val
                    },
                    //批量销毁填写数据显示对话框
                    handlebatch(){
                        this.dialogFormVisible=true
                    },
                    //批量销毁
                    destorybatch(){
                        console.log("-----------------------")
                        console.log(this.formbatch)
                        console.log(this.multipleSelection)
                        let ids = this.multipleSelection.map(v => v.id)
                        console.log(ids)
                        this.dialogVisible=false
                    },
                    //取消按钮
                    cancel(){

                        this.destoryForm.destory_people=""
                        this.destoryForm.destory_way=""
                        this.destoryForm.destory_people_number=""
                        this.dialogVisible = false
                    },
                    batchcancel(){
                        this.formbatch.destory_people=""
                        this.formbatch.destory_way=""
                        this.formbatch.destory_people_number=""
                        this.dialogFormVisible=false
                    },
                    format1() {
                        var _this = this;
                        let yy = new Date().getFullYear();
                        let mm = new Date().getMonth()+1;
                        let dd = new Date().getDate();
                        let hh = new Date().getHours();
                        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                        _this.sendTime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;

                    }, //获取当前时间
                    //单一销毁
                    simpledestory(){
                        console.log(this.destoryForm)

                        this.Form1.blood_recycle_id = this.destoryForm.blood_recycle_id//回收编号
                        this.Form1.blood_bag_number = this.destoryForm.blood_bag_number//血袋编号
                        this.Form1.destory_people = this.destoryForm.destory_people
                        this.Form1.destory_way =  this.destoryForm.destory_way
                        this.Form1.destory_people_number =  this.destoryForm.destory_people_number
                        console.log(this.Form1)
                        axios.post("/destory/normal/insert",this.Form1).then(res => {
                            if (!res){
                                this.$message.error("输入存在空值")
                            }else{
                                this.$notify({
                                    title:'成功',
                                    message:'销毁成功',
                                    type:'success'
                                })
                                this.$message.success("销毁成功")
                                this.dialogVisible = false
                                this.load()

                            }

                        })
                    },
                    // 获取血袋回收状态字典
                    getRecycleState(){
                        axios.get('/BloodbagState/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.options = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中BloodbagState字段的code转换成name
                    getRecycleBagStateName(code){
                        for (var i = 0; i < this.options.length; i++) {
                            if (this.options[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.options[i].name;
                            }
                        }
                    },
                    // 获取销毁方式状态字典
                    getDestoryWay(){
                        axios.get('/DestoryWay/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.destorywaylist = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中destoryway字段的code转换成name
                    getdestoryWayName(code){
                        for (var i = 0; i < this.destorywaylist.length; i++) {
                            if (this.destorywaylist[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.destorywaylist[i].name;
                            }
                        }
                    },
                    // 获取血液位置字典
                    getBloodLocation(){
                        axios.get('/bloodLocation/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodLocationList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },
                    // 将表格中bloodLocation字段的code转换成name
                    getBloodLocationName(code){
                        for (var i = 0; i < this.bloodLocationList.length; i++) {
                            if (this.bloodLocationList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodLocationList[i].location;
                            }
                        }
                    },
                    dateformat1(format){
                        var o = {
                            "M+": this.getMonth() + 1, //month
                            "d+": this.getDate(), //day
                            "h+": this.getHours(), //hour
                            "m+": this.getMinutes(), //minute
                            "s+": this.getSeconds(), //second
                            "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
                            "S": this.getMilliseconds() //millisecond
                        }
                        if (/(y+)/.test(format)) {
                            format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                        }

                        for (var k in o) {
                            if (new RegExp("(" + k + ")").test(format)) {
                                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                            }
                        }
                        return format;
                    }



                }

            });
        })()
    </script>



</body>

</html>